<template>
<div class="gradeTable">
  <el-table :data="tableData" v-loading="loading" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="lecId" label="编号" >
    </el-table-column>
    <el-table-column prop="lecName" label="标题">
    </el-table-column>
    <el-table-column prop="lecAuthor" label="主讲" width="220">
    </el-table-column>
    <el-table-column prop="lecHour" label="课 时" width="120">
    </el-table-column>
    <el-table-column fixed="right" label="操 作" width="100">
      <template slot-scope="scope">
        <el-button @click="goToGradeDetail(scope.row)" type="text" size="small">查看场次</el-button>
      </template>
    </el-table-column>
  </el-table>

   <div class="pager">
      <el-pagination layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
      </el-pagination>      
    </div>
</div>
</template>

<script type="text/ecmascript-6">
import {mapGetters, mapMutations} from 'vuex'
export default {
  created(){
    this.getData(this.$route.params.id,this.page)
    setTimeout(() => {
      this.loading = false
    },600)
  },
  methods: {
    handleCurrentChange(val) {
      this.getData(val)
    },
    getData(id,page){
      var _this=this
      this.$ajax.get('/api/getLectures?page=' + (page-1)+'&id=' + id).then(function(response){
        _this.tableData = response.data.data.content
        _this.totalCount = response.data.data.totalElements
      }).catch(function(error){console.log(error);}); 
    },
    goToGradeDetail(row) {
      this.$emit('refreshbizlines', row);
      setTimeout(() => {
        this.$notify({
          message: '讲座：'+row.lecName,
          duration: 3000
        });
      }, 600);
    },
    ...mapMutations({
    setIsShow: 'SET_ISSHOW'
    }),
  },
  data() {
    return {
      loading:true,
      tableData: [],
      page: 1,
      currentPage: 1,
      totalCount: 0
    }
  },
  destroyed: function () {
    this.setIsShow(false)
  }
}
</script>

<style scoped>
.pager{margin-top:35px;text-align:center;}
.gradeTable{
  position: absolute;
  width: 97%;
  height: 50%;
  top: 20px;
  background-color: #fff;
}
</style>
